<template>
	<div class="index">
		<my-banner></my-banner>

       <div v-if="img == true" style="width: 80%; height:60%;  position: fixed;z-index: 1000; top: 0px;bottom: 0;left: 0;right: 0;margin:auto">

      
          <div @click="closeimg" style="position: absolute; background-color: gray; right: 0px; padding: 2px 5px;">关闭</div>

          <a style="color: #595757;text-decoration:blink;" href="javascript:void(0);" @click="open" target="_self">
            <img style="width: 100%" :src="advimg">
          </a>

       </div>
      
         
		<ul class="part">
			<li class="activity" @click="toActive">
				<div><i class="iconfont iconpart icon-huodong"></i></div>
				<p>活动</p>
			</li>
			<li class="order" @click="toOrder">
				<div><i class="iconfont iconpart icon-dingdan"></i></div>
				<p>订单</p>
			</li>
     <!--  <li class="card" @click="toCard">
        <div><i class="iconfont iconpart icon-handle-card"></i></div>
        <p>办卡</p>
      </li> -->
      <li class="recharge" @click="toRecharge">
        <div><i class="iconfont iconpart icon-chongzhi"></i></div>
        <p>充值</p>
      </li>

		</ul>

		<div class="main">
			<ul class="serve">
        <li v-for="item in list" @click="toDetail(item.id)">
          <img :src="item.img">
          <!-- <p>{{item.type}}</p>  -->
        </li>   
      </ul>
		</div>

    <!-- 底部导航 -->
    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li active" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>

    <!-- 弹出广告 -->
    <!-- <div class="advert">
      <my-banner></my-banner>
    </div> -->

    <!-- 更新经纬度 -->
    <!-- <lat-lng></lat-lng> -->

    <!-- 获取当前位置 -->
    <div class="loading" v-if="show">
      <img class="load Rotation" src="/assets/img/loading.gif">
      <p class="load_text">正在获取当前位置，请稍等！</p>
    </div>

	</div>
</template>


<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
import Banner from '@/components/common/Banner'
import wx from 'weixin-js-sdk'
export default {
	data(){
		return {
      show: true,
			num: 0,
			key: '',
      list: {},
      img:false,
      adv:[]
		}
	},
	beforeMount(){
    this.getInfo();
    this.uploadAddress();
    this.getAdvertisement();
	},
  mounted() {


    this.$root.share();
    if (sessionStorage.getItem('is_show') == '0') {
      this.show = false;
    }
  },
  beforeUpdate(){

  },
	methods: {
    
		toSearch() {
			var that = this;
			this.$router.push({
				name:'Search',
        params: {
          key: that.key,
        }
			})
		},
		toActive() {
			this.$router.push({path:'/active'})
		},
		toOrder(){
			this.$router.push({path:'/order'})
		},
    toCard(){
      this.$router.push({path:'/card'})
    },
    toRecharge(){
      this.$router.push({path:'/recharge'})
    },
    // 查看小伙伴详情
		toPartner(){
			this.$router.push({path:'/partner'})
		},
    toDetail(id){

      var that = this;
      // alert(sessionStorage.getItem('judge'))
      if (that.show == false) {
        if (that.carLength == 0) {
          alert("请先填写您的车辆信息！");
          that.$router.push({path:'/carlove'})
        }else{
          window.location.href = '/#/external?service='+id;
          // that.$router.push({
          //   name: 'external',
          //   params: {
          //     service: id,
          //   }
          // })
        }
      } 
      // else {
      //   alert("正在获取您的地址，请稍等！");
      // }

    },

    closeimg(){
       
       var that = this;
       axios.get(global.api.index.closeAdv,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
      
        if(res.data.code == 0){
           that.img=false;
        }
        
      })
      .catch(function(res){
        
      })
    },
    toIndex(){
      this.$router.push({path:'/'})
    },
    toUser(){
      this.$router.push({path:'/user'})
    },

    open(){
      
      window.location.href=this.advlink
    },

    getAdvertisement(soft){
      var that = this;
      axios.get(global.api.index.showAdv,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){

        if(res.data.error == 104 || res.data.error == 103){
      
            that.$root.refrshUuid();
        }
        
        if(res.data.data.code == 0){
          
          if(localStorage.getItem('adv_id') != res.data.data[0]['id']){
               
               that.img = true;
               that.advimg = res.data.data[0]['img'];
               that.advlink = res.data.data[0]['link'];
               localStorage.setItem("adv_id",res.data.data[0]['id']);
          }
  
        }
        
      })
      .catch(function(res){
        console.log(res);
      })
    },

    // 接口
    getInfo(soft){

      var that = this;
      axios.all([

        axios.get(global.api.carMine.car,{  //车子数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),

        axios.get(global.api.index.servceList,{  //服务种类
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),

      ])

      .then(axios.spread(function(car,res){

          that.list = res.data.data;
          that.carLength = car.data.data.length;

      }))
      
      .catch(function(res){
        console.log(res);
      })
    },

    // 上传地址
    uploadAddress(){
      var that = this;
      var pathUrl = window.location.href;
      pathUrl = Base64.encode(pathUrl);

      axios.get(global.api.user.jssdk,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          url: pathUrl,
        }
      })

      .then(function(res){
        console.log("getJssdk then");
        console.log(res);

        wx.config({
          debug: false,
          appId: res.data.content.appId,
          timestamp: res.data.content.timestamp,
          nonceStr: res.data.content.nonceStr,
          signature: res.data.content.signature,
          jsApiList: ['chooseImage','uploadImage','getLocation']
        });

        wx.ready(function(res){
          wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {

              axios.get(global.api.user.latlng,{
                params: {
                  uuid: localStorage.getItem('carWashUuid'),
                  lat: res.latitude,
                  lng: res.longitude,
                }
              })

              .then(function(res){
                console.log("上传地址 then");
                console.log(res);
                if (res.data.error == 0) {
                  that.show = false;
                  // global.is_show = false;
                  sessionStorage.setItem('is_show','0');
                }
              })

              .catch(function(res){
                console.log("上传地址 catch");
                console.log(res);
              })

            }
          });
        });

        wx.error(function(res){
          console.log(res);
        })
      })

      .catch(function(res){
        console.log(res);
      })
    },

  },
  components: {
    'my-banner': Banner
  }
}
</script>

<style scoped>
	/* 搜索 */
	.search{
		height: 2rem;
	}
	.search_ipt{
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    /*line-height: 2rem;*/
    border: none;
    font-size: 0.85rem;
    padding-left: 0.5rem;
	}
	.search_ipt:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
	.iconsearch{
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
		font-size: 1.4rem;
	}
	.banner { 
		/*margin: 0;
		padding: 0;*/
	}
	.banner img {
		width: 100%;
	}
	/* 活动... */
	.part {
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 0.1rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
	}
	.part li {
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
	}
	.part li div{
		width: 2rem;
		height: 2rem;
		margin: 0 auto;
		border-radius: 50%;
	}
	.activity div{
		background-color: #FF2976;
	}
	.order div{
		background-color: #2ecc80;
	}
	.card div{
		background-color: #6A54ED;
	}
	.recharge div{
		background-color: #00d4cb;
	}
	.iconpart{
		font-size: 1.5rem;
		/*background-color: #FF2976;*/
		border-radius: 50%;
		color: #ffffff;
		line-height: 2rem;
	}
	.part li p{
		padding: 0.4rem 0;
		font-size: 0.9rem;
		/*font-weight: bold;*/
		color: #000000;
	}
  /*mian 主体图片*/
  .main{}
  .serve{
    padding-bottom: 5rem;
  }
  .serve li {
    padding-top: 1.5rem;
  }
  .serve li img {
    width: 75%;
    display: block;
    margin: 0 auto;
  }
  .serve li p {}

  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
    /*height: 5rem;*/
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
  /* 弹出广告 */
  .advert{
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1050;
    background-color: rgba(0,0,0,0.3);
  }

.loading{
  /*position: fixed;
  top: 0;
  left: 0;
  z-index: 1099;
  width: 100%;
  height: 100%;*/
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  height: 8rem;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -5.5rem;
  z-index: 1099;
}
.load{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1100;
  width: 5rem;
  height: 5rem;
  margin-left: -2.5rem;
  margin-top: -5rem;
}
.load_text{
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  color: #fff;
}
.hide{
  display: none;
}
@-webkit-keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
.Rotation{
  -webkit-transform: rotate(360deg);
  animation: rotation 1.5s linear infinite;
  -moz-animation: rotation 1.5s linear infinite;
  -webkit-animation: rotation 1.5s linear infinite;
  -o-animation: rotation 1.5s linear infinite;
}
</style>
<style>
	ul,li,div,a,p,span{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.flex{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	.side_center{
		justify-content: space-between;
		align-items: center
	}
	.start_center{
		justify-content: flex-start;
		align-items:center;
	}
	.start_end{
		justify-content: flex-start;
		align-items: flex-end;
	}
  .icon-arrowright{
    color: #2ecc80;
  }
</style>
